<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="box_a">
		<div id="header_a">
			<p>通讯录</p>
			<input type="text" placeholder="请输入要搜索的内容" class="txt_a">
			<input type="button" value="搜索" class="txt_b">
		</div>
		<div id="header_b">
			<p class="name_a">姓名</p>
			<p class="name_b">
				<input type="text" name="name" value="" class="b_a" id="b_ab" placeholder="请输入姓名">
			</p>
			<p class="phone_a">电话</p>
			<p class="phone_b">
				<input type="text" name="phone" value="" class="b_a" id="b_bb" placeholder="请输入电话号码">
			</p>
			<p class="email_a">邮箱</p>
			<p class="email_b">
				<input type="text" name="email" value="" class="b_a" id="b_cb" placeholder="请输入邮箱">
			</p>
			<p class="bc">
				<input type="button" value="保存" id="bc_a">
			</p>
		</div>	
	</div>
	<div id="tpy">
		<table class="tpy_a table">
        <thead style="height: 40px;">
          <tr>
            <th style="width: 200px;">姓名</th>
            <th style="width: 300px;">电话</th>
            <th style="width: 300px;">邮箱</th>
            <th style="width: 190px;">操作</th>
          </tr>
        </thead>
        <tbody>
        	
        </tbody>
      </table>
	</div>
	<div id="box_b">
		<div id="box_ab">
			<p class="p_a">修改</p>
			<div id="header_c">
				<p class="name_aa">姓名</p>
				<p class="name_bb">
					<input type="text" name="name" value="" class="b_aa" id="name_name">
				</p>
				<p class="phone_aa">电话</p>
				<p class="phone_bb">
					<input type="text" name="phone" value="" class="b_aa" id="phone_phone">
				</p>
				<p class="email_aa">邮箱</p>
				<p class="email_bb">
					<input type="text" name="email" value="" class="b_aa" id="email_email">
				</p>
				<p class="bcc">
					<input type="button" value="保存修改" id="bc_bb">
					<input type="button" value="取消" id="bc_aa">
				</p>
			</div>
		</div>
	</div>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
	<script src="../jquery/jquery.cookie.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script>
		
		var dataAll = sessionStorage.getItem('list');
		dataAll = dataAll ? JSON.parse(dataAll) : [];

		 $('.txt_b').on('click',(function(){
			var arr = dataAll.filter(function(i){
				return Object.values(i).join("").indexOf($('.txt_a').val()) != -1 ;
			});
			var trs = '';
			arr.forEach(v => {
				trs += `
					<tr>
						<td>${v.name}</td>
						<td>${v.phone}</td>
						<td>${v.email}</td>
						<td>
							<button id='btn3' class='btn btn-danger btn-sm delete' >删除</button>
							<button id='btn4' class='btn btn-danger btn-sm edit'>修改</button>
						</td>
					</tr>
				`
			})
			$('tbody').html(trs);
		}))
		
		function tc(){
			var trs = '';
			dataAll.forEach(a => {
				trs += `<tr>
          <td>${a.name}</td>
          <td>${a.phone}</td>
          <td>${a.email}</td>
          <td>
            <button class='btn btn-danger btn-sm delete'>删除</button>
            <button class='btn btn-danger btn-sm edit'>修改</button>
          </td>
        </tr>`
			})
			$(`.table tbody`).html(trs);
		}
		tc()

		$("#bc_a").on('click',function(){
			var name_a = $('#b_ab').val();
			if(!/[\u4E00-\u9FA5\uf900-\ufa2d]$/.test(name_a)){
				alert('请正确填写包含中文的姓名')/[\u4E00-\u9FA5\uf900-\ufa2d]/ig
       		 	return;
			}
			var phone_a = $('#b_bb').val();
			if(!/^0*(13|15|18|14)\d{9}$/.test(phone_a)){
				alert('请填写正确的手机电话号码')
       		 	return;
			}
			var email_a = $('#b_cb').val();
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(email_a)){
				alert('请填写正规邮箱地址')
       		 	return;
			}						
			var obj = {
		        name: $('#b_ab').val(),
		        phone: $('#b_bb').val(),
		        email: $('#b_cb').val(),
		      }
		    dataAll.push(obj);
		    sessionStorage.setItem('list', JSON.stringify(dataAll));

		    var trs = `<tr>
		        <td>${obj.name}</td>
		        <td>${obj.phone}</td>
		        <td>${obj.email}</td>
		        <td>
		          <button class='btn btn-danger btn-sm delete'>删除</button>
		          <button class='btn btn-danger btn-sm edit'>修改</button>
		        </td>
		      </tr>`;

		      $('.table tbody').append(trs);
		})

		$('.tpy_a tbody').on('click','.delete',function(){
			var tr = $(this).parent().parent();
			dataAll.splice(tr.index(), 1);
			sessionStorage.setItem('list', JSON.stringify(dataAll));
			tr.remove();
		})

		.on('click', '.edit', function(){

	      var tr = $(this).parent().parent();
	      var obj = dataAll[ tr.index() ];
	      $("#name_name").val(obj.name);
	      $("#phone_phone").val(obj.phone);
	      $("#email_email").val(obj.email);
	      $('#box_b').data("index", tr.index()).modal();
	      console.log(obj.name)
	    })
			
		 $("#bc_bb").on('click', function(){
	      var index = $('#box_b').data('index');
	      
	      dataAll.splice(index, 1, {
	        name: $('#name_name').val(),
	        phone: $('#phone_phone').val(),
	        email: $('#email_email').val(),
	      })
	      console.log($('#name_name').val())
	      sessionStorage.setItem('list', JSON.stringify(dataAll));
	      $('#box_b').modal('hide');
	      tc();
	    })
		 $("#bc_aa").on('click', function(){
		 	$('#box_b').modal('hide');
		 })
		 
		 console.log(sessionStorage.getItem('list'))
		//  单元搜索   
	</script>
</body>
</html>